<template>
  <!-- 顶部导航栏 - 固定在页面顶部 -->
  <header class="header" ref="headerRef">
    <!-- 导航栏容器 - 限制最大宽度并居中 -->
    <div class="header-container">
      <!-- Logo区域 - 包含小红书Logo -->
      <div class="logo">
        <!-- 小红书Logo图片 - 使用相对路径引用assets中的图片 -->
        <img src="/src/assets/xiaohongshu.png" alt="小红书" class="logo-image" />
      </div>
      
      <!-- 搜索框区域 - 占据中间位置 -->
      <div class="search-container">
        <div class="search-box">
          <!-- 搜索图标 -->
          <img src="/src/assets/icons/search.png" alt="搜索" class="search-icon" />
          <!-- 搜索输入框 - 绑定到searchQuery响应式数据 -->
          <input 
            type="text" 
            placeholder="登录探索更多内容" 
            class="search-input"
            v-model="searchQuery"
          />
        </div>
      </div>
      
      <!-- 右侧操作区域 - 包含按钮和用户头像 -->
      <div class="header-actions">
        <!-- 创作中心按钮 -->
        <button class="action-btn">创作中心</button>
        <!-- 业务合作按钮 -->
        <button class="action-btn">业务合作</button>
        <!-- 用户头像 -->
        <div class="user-avatar">
          <img src="https://ts1.tc.mm.bing.net/th/id/R-C.cbcc58d28a3938d1c825b9cb6bdac212?rik=7PpzBlY2Z4mALA&riu=http%3a%2f%2fwww.itedou.com%2fUploads%2fstar%2f20190521%2f175601.jpg&ehk=rSwcnDKCDFOsKgf6MvBfj%2fU3dN7C2qXtKvGfENDdsWw%3d&risl=&pid=ImgRaw&r=0" alt="用户头像" />
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
// 导入Vue的响应式API
import { ref, onMounted, onUnmounted } from 'vue'

// 搜索查询的响应式数据
const searchQuery = ref('')

// 头部容器元素引用
const headerRef = ref(null)

// 处理滚动事件
const handleScroll = () => {
  if (headerRef.value) {
    if (window.scrollY > 20) {
      headerRef.value.classList.add('scrolled')
    } else {
      headerRef.value.classList.remove('scrolled')
    }
  }
}

// 组件挂载时添加滚动监听
onMounted(() => {
  window.addEventListener('scroll', handleScroll, { passive: true })
  // 初始化状态
  handleScroll()
})

// 组件卸载时移除滚动监听
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
/* 头部导航栏样式 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-bottom: 1px solid var(--border-color);
  z-index: 1000;
  height: 60px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

/* 滚动时的头部样式 */
.header.scrolled {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  background: #ffffff;
}

/* 头部容器样式 */
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1536px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  width: 100%;
}

/* Logo区域样式 */
.logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}

/* Logo图片样式 */
.logo-image {
  height: 32px;
  width: auto;
  object-fit: contain;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Logo悬停效果 */
.logo-image:hover {
  transform: scale(1.05);
  filter: brightness(1.05);
}

/* 搜索容器样式 */
.search-container {
  flex: 1;
  max-width: 520px;
  margin: 0 96px 0 80px;
}

/* 搜索框样式 */
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 30px;
  padding: 8px 20px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

/* 搜索框焦点效果 */
.search-box:focus-within {
  background: white;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(255, 36, 66, 0.1);
}

/* 搜索图标样式 */
.search-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  margin-right: 10px;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

/* 搜索框焦点时的图标样式 */
.search-box:focus-within .search-icon {
  opacity: 0.8;
}

/* 搜索输入框样式 */
.search-input {
  border: none;
  background: transparent;
  outline: none;
  flex: 1;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-color);
  padding: 4px 0;
}

/* 搜索框占位符样式 */
.search-input::placeholder {
  color: var(--light-text);
  font-weight: 400;
}

/* 头部操作区域样式 */
.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* 操作按钮样式 */
.action-btn {
  background: none;
  border: none;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 16px;
  border-radius: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* 操作按钮悬停效果 */
.action-btn:hover {
  color: var(--primary-color);
  background: rgba(255, 36, 66, 0.05);
  transform: translateY(-1px);
}

/* 用户头像样式 */
.user-avatar {
  position: relative;
}

.user-avatar img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* 用户头像悬停效果 */
.user-avatar img:hover {
  border-color: var(--primary-color);
  transform: scale(1.05);
  box-shadow: 0 0 0 2px rgba(255, 36, 66, 0.1);
}

/* 响应式设计 */
@media (max-width: 1536px) {
  .header-container {
    max-width: 1200px;
    padding: 0 20px;
  }
  
  .search-container {
    max-width: 460px;
    margin: 0 80px 0 64px;
  }
}

@media (max-width: 1200px) {
  .header-container {
    padding: 0 20px;
    max-width: 100%;
  }
  
  .search-container {
    margin: 0 56px 0 48px;
    max-width: 400px;
  }
  
  .header-actions {
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .header {
    height: 50px;
  }
  
  .header-container {
    padding: 0 16px;
  }
  
  .logo-image {
    height: 28px;
  }
  
  .search-container {
    margin: 0 32px 0 32px;
    max-width: 300px;
  }
  
  .search-box {
    padding: 8px 16px;
  }
  
  .action-btn {
    font-size: 12px;
    padding: 6px 12px;
  }
  
  .user-avatar img {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 480px) {
  .search-container {
    margin: 0 16px;
    max-width: 200px;
  }
  
  .action-btn {
    display: none;
  }
  
  .search-input::placeholder {
    font-size: 12px;
  }
}
</style>